<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="620px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <div class="inline">
        <el-form-item label="选择模板">
          <el-select v-model="model" disabled placeholder="请选择">
            <el-option label="系统模板" :value="1" />
          </el-select>
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="入住周期" prop="start_date">
          <el-date-picker
            v-model="form.start_date"
            format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <span class="daterange">--</span>
        <el-form-item label-width="0" prop="end_date">
          <el-date-picker
            v-model="form.end_date"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="请选择结束日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item class="money" label="租金" prop="pay_money">
          <el-select
            v-model="form.pay_type"
            placeholder="请选择"
            @change="paywayChange"
          >
            <el-option label="月租金" value="month" />
            <el-option label="日租金" value="day" />
          </el-select>
          <el-input
            v-model="form.pay_money"
            placeholder="请输入租金"
            type="number"
            @input="setBen"
          />
        </el-form-item>
        <el-form-item label="押金" prop="rent_deposit">
          <el-input
            v-model="form.rent_deposit"
            placeholder="请输入押金"
            type="number"
          />
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="居住人数" prop="people_number">
          <el-input
            v-model="form.people_number"
            placeholder="请输入居住人数"
            type="number"
          />
        </el-form-item>
        <el-form-item label="面积" prop="rent_area">
          <el-input v-model="form.rent_area" placeholder="请输入面积" />
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="支付时间" prop="pay_days">
          <el-select v-model="form.pay_days" placeholder="请选择支付时间">
            <div v-if="form.pay_type == 'month'">
              <el-option
                v-for="item in monthway"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </div>
            <div v-else-if="form.pay_type == 'day'">
              <el-option label="一次性" :value="0" />
              <el-option
                v-for="n in 31"
                :key="n"
                :label="'每' + n + '天'"
                :value="n"
              />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="用途" prop="used_type">
          <el-select v-model="form.used_type" placeholder="请选择">
            <el-option label="居住" value="居住" />
            <el-option label="商业" value="商业" />
          </el-select>
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item>
          <el-button @click="addItem">
            <i
              v-if="form.deviceOther == ''"
              class="el-icon-circle-plus add"
            ></i>
            <i v-else class="el-icon-success has"></i>
            房间物品
          </el-button>
          <el-button @click="addRule">
            <i
              v-if="form.contract_other == ''"
              class="el-icon-circle-plus add"
            ></i>
            <i v-else class="el-icon-success has"></i>
            其他约定
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
    <el-dialog
      append-to-body
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-input
        v-model="textarea"
        :maxlength="textLength"
        :placeholder="placeholder"
        rows="5"
        show-word-limit
        type="textarea"
      />
      <template #footer>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveText">确 定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { addContract } from '@/api/contract'

  export default {
    name: 'AddContract',
    data() {
      return {
        form: {
          room_id: '',
          rent_sn: '',
          customer_id: '',
          pay_type: 'month',
          pay_money: null,
          pay_days: 1,
          rent_area: null,
          rent_deposit: null,
          people_number: null,
          used_type: '居住',
          contract_other: '',
          deviceOther: '',
          start_date: '',
          end_date: '',
        },
        rules: {
          start_date: [
            {
              required: true,
              message: '请选择开始日期',
              trigger: ['blur', 'change'],
            },
          ],
          end_date: [
            {
              required: true,
              message: '请选择结束日期',
              trigger: ['blur', 'change'],
            },
          ],
          pay_money: [
            {
              required: true,
              message: '请输入租金',
              trigger: ['blur', 'change'],
            },
          ],
          rent_deposit: [
            {
              required: true,
              message: '请输入押金',
              trigger: ['blur', 'change'],
            },
          ],
          people_number: [
            {
              required: true,
              message: '请输入居住人数',
              trigger: ['blur', 'change'],
            },
          ],
          rent_area: [
            {
              required: true,
              message: '请输入面积',
              trigger: ['blur', 'change'],
            },
          ],
          pay_days: [
            {
              required: true,
              message: '请选择支付时间',
              trigger: ['blur', 'change'],
            },
          ],
          used_type: [
            {
              required: true,
              message: '请选择用途',
              trigger: ['blur', 'change'],
            },
          ],
        },
        model: 1,
        title: '添加合同',
        dialogVisible: false,
        dialogType: '',
        dialogTitle: '',
        textarea: '',
        placeholder: '',
        textLength: 150,
        dialogFormVisible: false,
        monthway: [
          {
            value: 1,
            label: '每1月',
          },
          {
            value: 2,
            label: '每2月',
          },
          {
            value: 3,
            label: '每3月',
          },
          {
            value: 4,
            label: '每4月',
          },
          {
            value: 6,
            label: '每6月',
          },
          {
            value: 12,
            label: '每1年',
          },
          {
            value: 0,
            label: '一次性',
          },
        ],
      }
    },
    computed: {
      pickerOptions() {
        let startDateVal = this.form.start_date
        return {
          disabledDate(time) {
            return time.getTime() < new Date(startDateVal).getTime()
          },
        }
      },
    },
    methods: {
      showEdit(row) {
        this.form.room_id = row.room_id
        this.form.customer_id = row.customer_id
        this.form.rent_sn = row.rent_sn
        this.form.start_date = row.start_date
        this.form.end_date = row.end_date
        this.form.people_number = row.customer_list.length + 1
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      paywayChange(e) {
        if (e == 'month') {
          this.form.pay_days = 1
        } else if (e == 'day') {
          this.form.pay_days = 0
        }
      },
      setBen(e) {
        this.form.rent_deposit = e
      },
      closeDialog() {
        this.dialogVisible = false
      },
      addItem() {
        this.dialogType = 'item'
        this.dialogTitle = '房间物品'
        this.placeholder = '请填写房间物品'
        this.textLength = 300
        this.textarea = this.form.deviceOther
        this.dialogVisible = true
      },
      addRule() {
        this.dialogType = 'rule'
        this.dialogTitle = '其他约定'
        this.placeholder = '请填写其他约定'
        this.textLength = 300
        this.textarea = this.form.contract_other
        this.dialogVisible = true
      },
      saveText() {
        if (this.dialogType == 'item') {
          this.form.deviceOther = this.textarea
        } else if (this.dialogType == 'rule') {
          this.form.contract_other = this.textarea
        }
        this.dialogVisible = false
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.edit()
          }
        })
      },
      async edit() {
        const { data } = await addContract(this.form)
        if (data.is_success) {
          this.$baseMessage('添加成功', 'success', 'vab-hey-message-success')
          this.$emit('fetch-data')
          this.close()
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .inline {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
    .el-button {
      height: 32px;
      .add {
        color: #1890ff;
      }
      .has {
        color: #1ecb6b;
      }
    }
    ::v-deep .el-date-editor .el-range-separator {
      width: 10%;
    }
    .el-select {
      width: 200px;
    }
    .el-input {
      width: 200px;
    }
    .money {
      .el-select {
        width: 90px;
      }
      .el-input {
        width: 110px;
      }
    }
    .daterange {
      line-height: 32px;
      margin-right: 10px;
    }
  }
</style>
